<template>
  <div id="mainportal" class="container" style=" overflow: hidden;">

  <comhead title="会员注册" isLeftIcon="true" leftIconName="angle-left" @leftClick="foBack()" isRightIcon="true" rightIconName="ellipsis-h" @rightClick="updataActive()"></comhead>



<div class="container">


  <div style='padding-top:10px ;text-align:center'>


  </div>


  <div class='session1'>
    <div style=''>
      账号:
    </div>
    <div style='flex:1;padding:10px 0 10px 10px;border-bottom: solid 1px #e5e5e5;'>
      <input maxlength="11" placeholder="输入手机号" v-model="loginName"  />
    </div>
  </div>

  <div class='session1' >
    <div style=''>
      验证:
    </div>
    <div style='flex:1;padding:10px 0 10px 10px;border-bottom: solid 1px #e5e5e5;display:flex;align-items: center;position: relative;'>
      <input placeholder="输入短信验证码" v-model="code" maxlength='6'/>
 

      <div @click="getCode" class='getCode' :style="'color:'+$store.getters.getMerchant.themeColors">
        <div style='height:20px;border-right: solid 1px #e5e5e5;'>

        </div>
        <div style='padding:10px;' :style="isdisable?'color:#999':''">{{verifyInfo}}</div>
      </div>
    </div>


  </div>

  <div class='session1'>
    <div style=''>
      密码:
    </div>
    <div style='flex:1;padding:10px 0 10px 10px;border-bottom: solid 1px #e5e5e5;'>
      <input type='password' placeholder="设置密码" v-model="password" />
    </div>
  </div>


  <div class="session1">
    <div style=''>
      身份:
    </div>
    <div style='flex:1;padding:10px 0 10px 10px;' v-if="qds_module">
      <select v-model="role">
        <option value="OWNER">车主</option>
        <option value="PARTS">配件商</option>
        <option value="REPAIR">修理厂</option>
        <option value="REPAIRMAN">修理工</option>
      </select>
    </div>
    <div style='flex:1;padding:10px 0 10px 10px;' v-else>
      <select v-model="role">
        <option value="OWNER">车主</option>
        <option value="PARTS">配件商</option>
        <option value="REPAIR">修理厂</option>
      </select>
    </div>
  </div>
 <!-- style="{{index===3?'color:#999999':''}}" -->

<!-- {{loginName.length===11&&password.length>0&&index!=3&&code.length>0?'background-color:'+themeColors:'background-color:#ccc' }}; -->

  <div>
    <button class='sign'  @click='sign'>
      注册
    </button>
  </div>
  <div class='item-sign' :style="'color:'+$store.getters.getMerchant.themeColors">
   <!-- <div class='itemsBix'>
    <div @click='goLogin' style='padding : 10px' class='goLogin'> 返回登录</div>
    </div> -->
    </div>

</div>
 
  </div>
</template>

 
 

<script>
import { Toast, Swipe, SwipeItem, Switch, MessageBox } from "mint-ui";
import { Indicator } from "mint-ui";
import { Tabbar, TabItem } from "mint-ui";
import { TabContainer, TabContainerItem } from "mint-ui";
import comhead from "../common/coffee/Comhead";

export default {
  data() {
    return {
    	qds_module:false,
      role: "OWNER",
      loginName: "",
      password: "",
      verifyInfo: "获取验证码",
      isdisable: false,
      contactMobile: "",
      code: "" //验证码
    };
  },
  computed: {},
  methods: {
    goLogin() {
      this.$router.replace({
        name: "login"
      });
    },
    foBack() {
      this.$router.go(-1);
    },
    sign() {
      let self = this;

      if (!this.loginName.length === 11 && !this.password.length > 0) {
        return;
      }

      if (this.loginName.length!==11) {
        MessageBox.alert("手机号格式错误");
        return;
      } else {
        let url = this.$baseUrl.bizUrl + "/auth/register";
        let data = {
          loginName: this.loginName,
          password: this.password,
          code: this.code,
          role: this.role,
          merchantId: this.$store.getters.getMerchant.merchantId
        };
        let callBack = res => {
          if (res == null) {
            console.log("网络请求错误！");
            return;
          }

          if (res.data.status != 200) {
            MessageBox.alert(res.data.message);
            return;
          }
          if (res.data.status === 200) {
            console.log("注册成功", res);

            if (res.data.data.userStatus === "USER_CHECK_SUCCEED") {
              let storage = window.localStorage;
              storage.setItem(
                "LoginStatus",
                JSON.stringify({
                  userId: res.data.data.userId,
                  token: res.data.data.token
                })
              );

              let instance = Toast({
                message: "注册成功",
                iconClass: "icon icon-success"
              });
              setTimeout(() => {
                self.$router.replace({
                  name: "login"
                });
                instance.close();
              }, 2000);
            } else if (res.data.data.userStatus === "USER_UNCHECK") {
              MessageBox.alert("注册已提交,需等待后台审核").then(action => {
                self.$router.replace({
                  name: "login"
                });
              });
            }
          }
        };
        this.$reqFormPost(url, data, callBack);
      }
    },
    getCode() {
      if (this.isdisable == true) {
        return;
      }

      if (this.loginName.length!==11) {
        MessageBox.alert("手机号格式错误");
        return;
      }

      let self = this;
      let url = this.$baseUrl.bizUrl + "/auth/getsmscode";

      let data = {
        mobile: this.loginName,
        type: "SMS_118165006"
      };
      let callBack = res => {
        if (res == null) {
          console.log("网络请求错误1！");
          return;
        }
        if (res.data.status != 200) {
          MessageBox.alert(res.data.message);
          return;
        }

        if (res.data.status == 200) {
          var count = 60;
          var timer = setInterval(function() {
            count--;
            if (count >= 1) {
              self.verifyInfo = count + "s";
            } else {
              self.verifyInfo = "获取验证码";
              clearInterval(timer);
              self.isdisable = false;
            }
          }, 1000);
          self.isdisable = true;
          let instance = Toast({
            message: "发送成功",
            iconClass: "icon icon-success"
          });
          setTimeout(() => {
            instance.close();
          }, 2000);
        }
      };
      this.$reqFormPost(url, data, callBack);
    }
  },
  mounted() {
  	if(this.$store.getters.getMerchant.merchantId == 'Mer5b10b6cedb573c72d45b5c03' ) {
				
				this.qds_module = true
			}
  },
  components: {
    Tabbar,
    TabItem,
    TabContainer,
    TabContainerItem,
    comhead,
    Swipe,
    SwipeItem
  }
};
</script>
<style>

.session1 {
  display: flex;
  align-items: center;
  font-size: 16px;
  background-color: #fff;
  padding: 10px 25px;
}
.signBox {
  padding: 5px 0;
}
.itemsBix {
  display: flex;
  align-items: center;
}
.item-sign {
  display: flex;
  justify-content: center;
  padding: 5px 25px;
  font-size: 14px;
}

.getCode {
  z-index: 999;
  position: absolute;
  top: 0;
  right: 0;
  line-height: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  font-size: 14px;
  /* padding: 5px 0; */
}
.sign {
  margin: 10px auto;
  border: 1px solid #e5e5e5;
  border-radius: 5px;
  font-size: 16px;
  color: #fff;
  padding: 5px 0;
  width: 80%;
  background-color: #1973bf;
}
sign:active {
  opacity: 0.5;
}
</style>



<!-- Add "scoped" attribute to limit CSS to this component only -->
